window.addEventListener('load', function () {
    const btn = document.querySelector("button");
    const city = document.querySelector("#city");
    const cs = document.querySelector(".cs");
    const uptime = document.querySelector(".uptime");
    const wendu = document.querySelector(".wendu");
    const shidu = document.querySelector(".shidu");
    const fx = document.querySelector(".fengxiang");
    const div = document.querySelector(".right");
    const lis = div.querySelectorAll('li');
    const li1 = document.querySelector(".w1");
    // const li2 = document.querySelector(".w2");
    // const li3 = document.querySelector(".w3");
    // const li4 = document.querySelector(".w4");
    // const li5 = document.querySelector(".w5");
    const font = document.querySelector(".font");
    const main = document.querySelector(".main");
    // var echarts = require('echarts');
    var mychart=echarts.init(main);
    var option;
    
      option = {
          title: {
              text: '未来一周气温',
              subtext: ''
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              show:true,
              data: ['高温', '低温']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
          xAxis: {
              type: 'category',
              boundaryGap: false,
            //   data:[]
          },
          yAxis: {
            //   scale:true, //纵坐标起始点根据最低值变化
              type: 'value',
            //   axisLabel: {
            //       formatter: '{value} °C'
            //   }
          },
          series: [
              {
                  name:'高温',
                  type:'line',
              },
              {
                  name:'低温',
                  type:'line',
              }

          ]
      };    

    
    if (city.value) {
        weather()
    }
    btn.addEventListener("click", weather)
    function weather() {
        var val = city.value;
        const xhr = new XMLHttpRequest();
        //  xhr.responseType = 'json';
        xhr.open("GET", 'http://wthrcdn.etouch.cn/WeatherApi?city=' + val);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    console.log(xhr.responseXML);
                    const resp = xhr.responseXML.querySelector("resp");
                    cs.innerHTML = resp.querySelector('city').innerHTML;
                    uptime.innerHTML = resp.querySelector('updatetime').innerHTML;
                    wendu.innerHTML = resp.querySelector('wendu').innerHTML + '℃';
                    shidu.innerHTML = resp.querySelector('shidu').innerHTML;
                    fx.innerHTML = resp.querySelector('fengxiang').innerHTML;
                    // div.innerHTML = resp.querySelector('forecast').innerHTML;
                    //  for (var i = 0;i < lis.length;i++) {
                    //      lis[i].innerHTML = resp.querySelector('forecast').innerHTML;
                    //  }
                    const fore = resp.querySelector('forecast');
                    console.log(fore);
                    //    console.log(typeof fore);
                    const weather = fore.querySelectorAll('weather');
                    console.log(weather);
                    const data = [];
                    const high = [];
                    const low = [];
                    //const arr = Array.prototype.slice.call(weather);
                    const arr = weather;
                    console.log(arr);
                    // const arr = fore.querySelectorAll('weather');
                    for (var i = 0;i < arr.length;i++){
                        // arr[i] = weather[i];
                        data[i]=arr[i].querySelector('date').innerHTML;
                        // console.log(arr[i]);
                        // console.log(data[i]);
                        high[i]=arr[i].querySelector('high').innerHTML.replace(/[^-0-9]/ig,"");//获取温度值
                        low[i]=arr[i].querySelector('low').innerHTML.replace(/[^-0-9]/ig,"");//获取温度值
                    }
                    
                    mychart.setOption(option);
                    mychart.setOption(
                        {
                            legend:{
                                data:['高温','低温']
                            },
                            xAxis:{
                                data:data
                            },
                            series: [
                                {
                                    name:'高温',
                                    data:high
                                },
                                {
                                    name:'低温',
                                    data:low
                                }
                            ]
                        }
                    );
                    





                   const day = [];
                   for(var i = 0;i < weather.length;i++){
                       day[i] = weather[i].querySelector('day')
                   }
                 console.log(day);

                   
                    for (var i = 0; i < weather.length; i++) {
                        lis[i].querySelector("#date").innerHTML = weather[i].querySelector('date').innerHTML;
                        lis[i].querySelector("#high").innerHTML = weather[i].querySelector('high').innerHTML;
                        lis[i].querySelector("#low").innerHTML = weather[i].querySelector('low').innerHTML;
                        lis[i].querySelector("#non").innerHTML = weather[i].querySelector('day').innerHTML;
                        lis[i].querySelector("#night").innerHTML = weather[i].querySelector('night').innerHTML;
                    }
                     
                    const weatherType = [];
                    for(var i =0;i < weather.length;i++){
                        weatherType[i] = day[i].querySelector('type').innerHTML
                    }
                    
                          for(var i = 0 ;i < weather.length;i++){
                            switch (weatherType[i]) {
                                case '小雪':
                                     lis[i].querySelector('span').innerHTML = '&#xe606;';
                                     break;
                                case '大雨':
                                     lis[i].querySelector('span').innerHTML = '&#xe608;';
                                     break;  
                                case '晴':
                                    lis[i].querySelector('span').innerHTML = '&#xe605;';
                                    break;
                                case '多云':
                                    lis[i].querySelector('span').innerHTML = '&#xe600;';
                                    break;
                                case '云':
                                    lis[i].querySelector('span').innerHTML = '&#xe601;';
                                    break;
                                case '阴':
                                    lis[i].querySelector('span').innerHTML = '&#xe601;';
                                    break;
                                case '小雨':
                                    lis[i].querySelector('span').innerHTML = '&#xe602;';
                                    break;
                                case '中雨':
                                    lis[i].querySelector('span').innerHTML = '&#xe602;';
                                    break;
                                case '中雪':
                                    lis[i].querySelector('span').innerHTML = '&#xe607;';
                                    break; 
                                case '风':
                                    lis[i].querySelector('span').innerHTML = '&#xe604;';
                                    break; 
                                case '雾':
                                    lis[i].querySelector('span').innerHTML = '&#xe601;';
                                    break; 
                            }
                        }
                          
                    font.innerHTML = li1.querySelector('span').innerHTML;
                }
            }
        }
    }

})